<template>
	<view class="border-top pt-3">
		<view class="px-2" style="margin-bottom: 130rpx;">
			<view class="item px-25">
				<view class="flex justify-between align-center border-bottom" style="height: 90rpx;">
					<view class="font30">请假开始时间</view>
					<view class="">
						<picker mode="date" :value="startDate" @change="bindStartDate">
							<view class="uni-input">{{ startDate }}</view>
						</picker>
					</view>
				</view>
				<view class="flex justify-between align-center border-bottom" style="height: 90rpx;">
					<view class="font30">请假结束时间</view>
					<view class="">
						<picker mode="date" :value="endDate" @change="bindEndDate">
							<view class="uni-input">{{ endDate }}</view>
						</picker>
					</view>
				</view>
				<view class="py-2 font30"><textarea value="" @blur="bindTextAreaBlur" style="width: 100%;height: 250rpx;" placeholder="输入请假理由" /></view>
				<view class="">
					<view class="font30 color333">上传照片</view>
					<view class="pt-2 pb-3 flex align-center">
						<view class="flex mr-3" v-if="file != ''">
							<image v-for="(item, index) in file" :key="index" :src="imgTip+item" style="width:120rpx;height:120rpx;margin-right: 10rpx;" mode=""></image>
						</view>
						<view v-if="imgNum != 0" @click="addimg" class="flex border align-center justify-center" style="width: 120rpx;height: 120rpx;">
							<image src="../../static/img/ic_add.png" style="width:120rpx;height:120rpx;" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="fixed-bottom px-5 mb-3" style="z-index: 999;"><main-button @click="toLeave">提交</main-button></view>
	</view>
</template>

<script>
import mainButton from '../../components/common/main-buttom.vue';
export default {
	components: { mainButton },
	data() {
		const currentDate = this.getDate({
			format: true
		});
		return {
			file: [],
			vcContent: '',
			imgNum: 4,
			imgTip:"",
			startDate: currentDate,
			endDate: currentDate
		};
	},
	methods: {
		bindTextAreaBlur: function(e) {
			console.log(e.detail.value);
			this.vcContent = e.detail.value;
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},
		bindStartDate: function(e) {
			this.startDate = e.target.value;
		},
		bindEndDate: function(e) {
			this.endDate = e.target.value;
		},
		addimg() {
			uni.chooseImage({
				count: this.imgNum,
				success: chooseImageRes => {
					const tempFilePaths = chooseImageRes.tempFilePaths;
					console.log(tempFilePaths);
					this.imgNum = this.imgNum - tempFilePaths.length;
					for (var i = 0; i < tempFilePaths.length; i++) {
						uni.uploadFile({
							url: this.$http.baseUrl + '/FileUpload.shtml', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[i],
							name: 'file',
							formData: {},
							success: uploadFileRes => {
								console.log(uploadFileRes);
								if (uploadFileRes.statusCode == 200) {
									let data = JSON.parse(uploadFileRes.data);
									this.imgTip = data.corePath;
									this.file.push(data.fileUrl);
								}
							}
						});
					}
				}
			});
		},
		toLeave() {
			let this_ = this;
			if (this_.vcContent != '') {
				let opts = {
					url: 'Jz/SaveJzQj.shtml'
				};
				let param = {
					xs_id:uni.getStorageSync("classUserId"),
					vcQjsjKs: this_.startDate,
					vcQjsjJs: this_.endDate,
					longJzglId: uni.getStorageSync('userInfo').user_id,
					textQjsj: this_.vcContent,
					vcQjtpdz: this_.file
				};
				this_.$http.httpRequest(opts, param).then(
					res => {
						console.log(res.data);
						if (res.data.code == '200') {
							uni.navigateBack({
								delta:1
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
					},
					error => {
						console.log(error);
					}
				);
			} else {
				uni.showToast({
					icon: 'none',
					title: '理由不可为空！'
				});
			}
		}
	}
};
</script>

<style>
.item {
	background: rgba(255, 255, 255, 1);
	box-shadow: 0rpx 3rpx 10rpx 0rpx rgba(64, 64, 64, 0.12);
	border-radius: 20rpx;
}
</style>
